<template>
  <div class="pm-base-editor">
    <h1>{{ title }}</h1>
    <div ref="editorRoot" class="pm-base-editor">
        <div id="editor"></div>
        <div id="content">
          <p>123</p><p>456</p>
        </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import {Fragment, DOMParser, TagParseRule, Node, Mark, ResolvedPos} from "prosemirror-model"
import {initEditor} from './editor/PmBaseEditor'
const title = ref('基于 prosemirror 的 demo')



onMounted(() => {
    console.log('pm-base-editor mounted')
    const editor = initEditor('#editor', '#content')
    const {view,schema}= editor
    console.log(view);
    console.log(view.state.doc.nodeSize);
    // for (let index = 0; index < 14; index++) {
    //   console.log('index', index);
      
    //   // console.log(view.domAtPos(index));
    //   console.log(view.nodeDOM(index));
    // }
    // console.log(view.domAtPos(0));
    // console.log(view.domAtPos(1));
    
    // 根据 schema 解析 DOM 节点 为 node 
    const parser = DOMParser.fromSchema(schema)
    const doc = parser.parse(document.getElementById('content'))
    console.log(doc);
})

onBeforeUnmount(() => {
 
})
</script>

<style scoped lang="scss">
@import './editor/editorDemo.css';
.pm-base-editor {
  padding: 24px;

  h1 {
    margin-bottom: 16px;
  }
}

</style>
